<template>
  <div class="wrapper vCenter">
    <div class="loginLog">
      <img src="../../assets/login_log.png" alt="">
    </div>
    <div class="main" style="">
      <h3 class="title">欢迎使用物联网边端系统</h3>
      <div class="main_div">
        <div class="subTitle">登录</div>
        <div class="flexRow">
          <div class="icon">
             <img src="../../assets/login_account.png" alt="">
          </div>
          <p style="margin: 15px 0">
            <input class="inpt" v-model="username" />
          </p>
        </div>
        <div class="flexRow" style="margin-bottom: 15px">
          <div class="icon">
             <img src="../../assets/login_password.png" alt="">
          </div>

          <p>
            <input class="inpt" v-model="password" />
          </p>
        </div>

        <p class="flexRow" style="justify-content: center">
          <button class="button" style="margin-right: 25px" @click="login">
            登录
          </button>
          <button class="button" @click="reset">重置</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      if (this.username == "" || this.password == "") {
        alert("用户名或密码不能为空！");
      } else {
        this.$router.push({
          path: "/newEquipment",
        });
      }
    },
    reset() {},
  },
};
</script>

<style scoped lang="scss" >
.loginLog {
  position: absolute;
  right: calc(30% + 370px);
  height: 150px;
  width: 150px;
  &>img{
    height: 100%;
    width: 100%;
  }
}
.wrapper {
  position: relative;
}
.main {
  position: absolute;
  right: 30%;
}
.button {
  height: 30px;
  line-height: 30px;
  padding: 0 30px;
  color: #1996fa;
  background: #e6f1fc;
  border: 1px solid #d0e7fe;
  border-radius: 5px;
}
.inpt {
  height: 35px;
  line-height: 35px;
  padding: 0 10px;
  border: 1px solid #ccc;
}
.main_div {
  padding: 20px 25px 30px;
  margin: 15px 0 0;
  border: 1px solid #ccc;
}
.subTitle {
  font-size: 18px;
  font-weight: 600;
}
.icon {
  height: 30px;
  width: 26px;
  // background: cornsilk;
  margin-right: 5px;
  &>img{
    height: 100%;
    width: 100%;
  }
}
.flexRow {
  display: flex;
  align-items: center;
}
</style>
